<template>
  <div ref="testChart" class="echart-box">rose图表展示</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    classify: { // 应用那个类型的图标
      type: String,
      default: ''
    },
    testData: { // 柱状图渲染数据,数据的每一项都是Number
      type: Array,
      default() {
        return []
      }
    },
    index: {
      type: Array,
      default() {
        return []
      }
    },
    lat: { // 文案单位
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      tableData: this.testData,
      barHengEchart: [],
      latChoose: this.lat,
      indexChoose: this.index,
      dataArr: []
    }
  },
  created() {
    console.log('create')
    console.log('letchoose', this.index)
    console.log(('indexchoose', this.indexChoose))
    if (this.latChoose.some(e => e === 0)) {
      this.tableData.map((item, index) => {
        if (this.latChoose.some(e => e === 0)) {
          if (this.latChoose.some(e => e === 1)) {
            item.fault.map((items, indexs) => {
              if (this.indexChoose.length === 0) {
                this.barHengEchart.push({
                  value: items.index[0].data,
                  name: item.province + items.faultName
                })
              } else {
                this.indexChoose.map((indexItem) => {
                  this.barHengEchart.push({
                    value: items.index[indexItem].data,
                    name: item.province + items.faultName + items.index[indexItem].name
                  })
                })
              }
            })
          } else {
            if (this.indexChoose.length === 0) {
              this.barHengEchart.push({
                value: item.fault[0].index[0].data,
                name: item.province + item.fault[0].index[0].name
              })
            } else {
              this.indexChoose.map((indexItem) => {
                this.barHengEchart.push({
                  value: item.fault[0].index[indexItem].data,
                  name: item.province + item.fault[0].index[indexItem].name
                })
              })
            }
          }
        }
      })
      return
    }

    if (this.latChoose.some(e => e === 1)) {
      this.tableData[0].fault.map((item, index) => {
        if (this.indexChoose.length === 0) {
          this.barHengEchart.push({
            value: this.tableData[0].fault[index].index[0].data + this.tableData[1].fault[index].index[0].data + this.tableData[2].fault[index].index[0].data,
            name: item.faultName + item.index[0].name
          })
        } else {
          this.indexChoose.map((indexItem, ind) => {
            this.barHengEchart.push({
              value: this.tableData[0].fault[index].index[indexItem].data + this.tableData[1].fault[index].index[indexItem].data + this.tableData[2].fault[index].index[indexItem].data,
              name: item.faultName + item.index[indexItem].name
            })
          })
        }
      })
    }
    console.log('barHengEchart', this.barHengEchart)
  },
  mounted() {
    const testChart = echarts.init(this.$refs.testChart)
    testChart.setOption({
      title: {
        text: 'Nightingale Chart',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        left: 'center',
        top: 'bottom',
        // data: [
        //   'rose1',
        //   'rose2',
        //   'rose3',
        //   'rose4',
        //   'rose5',
        //   'rose6',
        //   'rose7',
        //   'rose8'
        // ]
        data: this.barHengEchart.map((item) => {
          return item.name
        })
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Area Mode',
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: this.barHengEchart
          // data: [
          //   { value: 30, name: 'stackLine 1' },
          //   { value: 28, name: 'stackLine 2' },
          //   { value: 26, name: 'stackLine 3' },
          //   { value: 24, name: 'stackLine 4' },
          //   { value: 22, name: 'stackLine 5' },
          //   { value: 20, name: 'stackLine 6' },
          //   { value: 18, name: 'stackLine 7' },
          //   { value: 16, name: 'stackLine 8' }
          // ]
        }
      ]
    })
  }
}
</script>

<style scoped>
  .echart-box {
    width: 100%;
    height: 400px;
  }

  .echart-barHeng {
    height: 300px;
  }
  .echart-barXiLine {
    height: 300px;
  }
  .echart-barCu {
    margin-top: 30px;
    height: 300px;
  }
  .echart-randar {
    height: 300px;
  }
  .echart-wordCloud {
    height: 300px;
  }
</style>
